<template>
  <div class="bodys">
    <TopNav class="header" :class="isOpenMuen ? 'isOpenMuenTop' : ''" />

    <div class="mainbox">
      <div class="hello">
        <h2>{{ msg }}</h2>
        <el-row class="tac">
          <el-col :span="24">
            <el-menu
            :default-openeds="openeds"
            :default-active="$route.path"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#286658"
            >
              <el-submenu
                :index="item.path"
                
                v-for="(item, index) in mainMenu"
                :key="index"
              >
                <template slot="title" >
 
                  <svg-icon
                    icon-class="approvalCom"
                    class-name="card-panel-icon"
                  />
                  <span  @click="show(index)">{{ item.name }}</span>
                </template>
                <template>
                  <div v-for="(items, indexs) in item.children" :key="indexs">
                    <router-link :to="items.path">
                      <el-menu-item :index="items.path">
                        <i class="el-icon-location"></i>
                        <span>{{ items.name }}</span>
                      </el-menu-item>
                    </router-link>
                  </div>
                </template>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <!-- 主要内容 -->
      <div class="main-container">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from "./TopNav";
export default {
  name: "Layout",
  props: {
    msg: String,
  },
  data() {
    return {
      mainMenu: [],
      openeds: ["0"],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    show(val){
      console.log(val)
    },
    // 获取全部功能吗
    getData() {
      this.mainMenu = this.$store.getters.gettersRouters;
      console.log(this.mainMenu);
      let funsList = [];
      // this.mainMenu.forEach((item) => {
      //   if (item.children.length > 0) {
      //     funsList.push.apply(funsList, item.children);
      //   } else {
      //     funsList.push.apply(funsList, item);
      //   }
      // });
    },
  },
  created() {
    this.getData();
    console.log(this.$store.getters.gettersRouters);
  },
  components: {
    TopNav: TopNav,
  },
  computed: {
    isOpenMuen: function() {
      return this.$store.getters.gettersisOpenMuen;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.bodys {
  overflow: hidden;
}
.header {
  position: fixed;
  height: 0.6rem;
  background: #286658;
  z-index: 1001;
  width: 100%;
}
.mainbox {
  margin-top: 0.2rem;
  display: flex;
}
.main-container {
  margin-top: 30px;
  width: 100%;
  background: #f6f6f6;
  min-height: 88vh;
}

.hello {
  width: 200px;
  margin-top: 0.4rem;
  .el-submenu .el-menu-item {
    width: 100%;
    min-width: 0%;
    a {
      color: white;
      text-decoration: none;
    }
    .el-menu-item-group__title {
      padding: 0px;
    }
  }
}

::v-deep.el-submenu .el-menu-item {
  padding: 0px !important;
  background: #286658 !important;
}
::v-deep .el-submenu a:hover {
  span {
    font-weight: 800;
  }
}
// ::v-deep .el-submenu :hover {
//   color: black;
//   text-decoration: none;
// }
::v-deep .el-menu-item.is-active {
  background: #ffffff !important;
  font-weight: bold;
}
// nav li a:hover {
//   position: relative;
//   display: block;
//   color: yellow;
//   font-weight: bold;
//   text-shadow: none;
//   text-decoration: none;
// }
</style>
